<template>
  <div id="self_bartending_mixology">
    <c-title :hide="false" text="调酒方案"></c-title>
    <div class="optionsList" v-if="info">
      <div class="goodOpt">
        <goodList :showVip="true" :showStepper="true" :barrelList="info.has_many_barrel"></goodList>
      </div>

      <div class="distribution">
        <div class="left">选择配送方式</div>
        <div class="right" @click="show = true">
          <span>{{ actions[selectAction] ? actions[selectAction].name : "选择配送方式" }}</span>
          <i class="iconfont icon-icon_down1"></i>
        </div>
      </div>
      <div class="distribution_c" v-if="selectAction == 0 || selectAction == 1">
        <div class="left">选择酒瓶</div>
        <div v-if="showSelectGood.length > 0" style="margin-bottom: 1.38rem;">
          <goodList @del="delMList" listType="mixology" :showStepper="true" :showDel="true" :barrelList="showSelectGood"></goodList>
        </div>
        <div class="btn" @click="showPopup = true">选择酒瓶</div>
      </div>
    </div>

    <div class="posBox set-pc-style">
      <div class="btn" @click="toPerOrder">确定方案</div>
    </div>
    <searchGoodListPopup :showPopup="showPopup" @close="closePopup" @childSelect="childSelect"></searchGoodListPopup>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action />
    <bartendPerOrder :openPopup="selectUser" @close="childClose" @confirm="childConfirm"></bartendPerOrder>
  </div>
</template>
<script>
import goodList from "../components/goodList.vue";
import searchGoodListPopup from "../components/searchGoodListPopup.vue";
import bartendPerOrder from "../components/bartendPerOrder";
export default {
  data() {
    return {
      val: 1,
      showPopup: false,
      actions: [
        { name: "快递", id: 1 },
        { name: "自取", id: 17 },
        { name: "现调", id: 18 }
      ],
      selectAction: 0,
      show: false,
      info: null,
      showSelectGood: [],
      selectUser: false,
      member_id: ""
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    childClose() {
      this.selectUser = false;
    },
    childConfirm(e) {
      this.member_id = e.uid;
      this.selectUser = false;
      this.toPerOrder();
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.info", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.info = [];
      this.selectAction = 0;
      this.showSelectGood = [];
      this.selectUser = false;
      this.member_id = "";
    },
    delMList(e) {
      let index = this.showSelectGood.findIndex(item => item.id === e);
      this.showSelectGood.splice(index, 1);
    },
    childSelect(e) {
      console.log(e, "传递参数");
      this.showSelectGood.push(e);
      this.closePopup();
    },
    onSelect(e) {
      let { id, name } = e;
      let ind = this.actions.findIndex(item => {
        return item.id == id;
      });
      console.log(ind, "选择的配送方式");
      this.selectAction = ind;
    },
    closePopup() {
      this.showPopup = false;
    },
    delList(e) {
      console.log(e, "传递参数");
      this.$dialog.confirm({
        title: "删除酒瓶",
        message: "确认删除选择的该酒瓶吗？",
        confirmButtonColor: "#F15353",
        cancelButtonColor: "#7E7E7E"
      });
    },
    // 去调酒预下单
    toPerOrder() {
      console.log(this.showSelectGood, "选择的酒瓶", this.info.has_many_barrel);
      let goods = [];
      goods = this.info.has_many_barrel
        .map(barrel => {
          if (barrel.has_one_good) {
            return {
              goods_id: barrel.has_one_good.id,
              total: barrel.has_one_good.selectVal, // 默认初始数量为1
              price: barrel.has_one_good.price,
              option_id: 0, // 默认无规格
              sort: barrel.sort
            };
          }
          return null;
        })
        .filter(item => item !== null); // 过滤掉 null 值
      let showGood = [];
      if (this.selectAction == 0 || this.selectAction == 1) {
        if (this.showSelectGood.length == 0) {
          this.$toast("请选择酒瓶");
          return;
        }
        showGood = this.showSelectGood.map(barrel => ({
          goods_id: barrel.id,
          total: barrel.selectVal, // 默认初始数量为1
          price: barrel.price,
          option_id: barrel.has_option == 1 ? barrel.option_id : 0 // 默认无规格
        }));
      }
      console.log(goods, "商品列表", showGood, [...showGood, ...goods]);
      let dispatch_type_id = this.actions[this.selectAction].id;
      let json = {
        goods: [...showGood, ...goods], // 商品列表
        dispatch_type_id: dispatch_type_id, // 配送方式，1 快递 17自提 18现调
        device_id: this.$route.params.id, // 设备id
        store_id: this.info.store_id // 门店id
      };
      json.goods.some(item => {
        if (item.total == 0) {
          this.$toast("请选择酒瓶数量");
          return true;
        }
      });
      if (!this.member_id) {
        this.selectUser = true;
        return;
      }
      if (this.member_id) {
        json.member_id = this.member_id;
      }
      this.paramPost(json);
    },
    async paramPost(json) {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.goods-buy.store-param", json, "");
      if (result) {
        console.log(data);
        if (!data.id) return;
        let temp_id = data.id;
        this.$router.push(this.fun.getUrl("goodsorder", {}, { temp_id: temp_id, tag: "selfBartendBuy" }));
      } else {
        this.$toast(msg);
      }
    }
  },
  components: { goodList, searchGoodListPopup, bartendPerOrder }
};
</script>
<style lang="scss" scoped>
#self_bartending_mixology {
  .optionsList {
    margin: 0.63rem 0.75rem;
    padding-bottom: 5rem;
    .goodOpt {
      padding: 0.72rem 0.75rem;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 0.5rem;
    }
  }
  .posBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0.63rem 0.75rem;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    .btn {
      padding: 0.75rem 0;
      background: #f15353;
      border-radius: 1.28rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      line-height: 1rem;
    }
  }
  .distribution_c {
    margin-top: 0.63rem;
    background: #ffffff;
    border-radius: 0.5rem;
    text-align: left;
    padding: 1.06rem 0.75rem;
    box-sizing: border-box;
    .left {
      font-weight: 500;
      font-size: 0.88rem;
      color: #00001c;
      margin-bottom: 0.94rem;
    }
    .btn {
      display: inline-block;
      font-weight: 500;
      font-size: 0.81rem;
      line-height: 0.95rem;
      color: #f15353;
      padding: 0.47rem 0.72rem;
      box-sizing: border-box;
      border: 0.03rem solid #f15353;
      border-radius: 0.88rem;
    }
  }
  .distribution {
    margin-top: 0.63rem;
    height: 3rem;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 1.06rem 0.75rem;
    box-sizing: border-box;
    display: flex;
    font-weight: 500;
    font-size: 0.88rem;
    color: #00001c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      span {
        font-size: 0.88rem;
      }
      .icon-icon_down1 {
        color: #aaaab3;
        font-size: 0.75rem;
        margin-left: 0.53rem;
      }
    }
  }
}
</style>
